<template>
    <el-card class="box-card">
       <!-- Form -->
       <!-- 头部按钮栏 -->
       <ul class="nav">
        <!-- 左侧 -->
        <li class="btn_left">
            <!-- 新建试卷 -->
        <el-button  color="#626aef" plain @click="dialogFormVisible = true" >
            <el-icon style="margin-right: 0.3rem;"><Plus /></el-icon> 新建试卷
        </el-button>

        <!-- 试卷弹窗 -->
            <el-dialog v-model="dialogFormVisible" title="Shipping address" :before-close="handleClose">
                <el-form :model="paper">
                <el-form-item label="试卷名称" :label-width="formLabelWidth">
                    <el-input v-model="paper.name" autocomplete="off" />
                </el-form-item>

                <el-form-item label="考生须知" :label-width="formLabelWidth">
                    <el-input
                        v-model="paper.request"
                        :autosize="{ minRows: 2, maxRows: 6 }"
                        type="textarea"
                        placeholder="Please input"
                    />
                </el-form-item>
                
                </el-form>
                <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">
                    确认
                    </el-button>
                </span>
                </template>
            </el-dialog>

        <!-- 删除 -->

        <el-button color="#626aef" plain style="margin-left: 0.5rem;" @click="DeleteAll">
            <el-icon style="margin-right: 0.3rem;"><Delete /></el-icon>删除
        </el-button>


        </li>
        <!-- 右侧 -->
        <li class="btn_right">
            <el-button color="#626aef" plain @click="Download">
                <el-icon style="margin-right: 0.3rem;"><FolderAdd /></el-icon>下载习题模板
            </el-button>
        </li>
        
        
       </ul>
       <!-- 文件区 -->
       <div class="file_Box">
            <ul class="file">
                <li class="left">全部文件</li>
                <li class="right">已全部加载，共{{this.tableData.length}} 个</li>
            </ul>
            <!-- 表格区域 -->
            <el-table ref="multipleTable" @row-click="handleRowClick" :data="tableData" :row-key="getRowKeys" border
  @selection-change="selectionChange" class="tab">
                <el-table-column type="selection" reserve-selection width="55"></el-table-column>
                <el-table-column prop="name" label="试卷名"> </el-table-column>
                <el-table-column prop="type" label="类型"> </el-table-column>
                <el-table-column prop="date" label="修改日期"> </el-table-column>
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <div class="bor">
                        <el-button size="mini"  plain @click.stop="edit(scope.row)">编辑</el-button>
                        <el-button size="mini"  plain @click.stop="edit(scope.row)">发布</el-button>
                        <el-button size="mini"  plain @click.stop="removeById(scope.row.goods_id)">删除</el-button>
                    </div>
                    </template>
                    

                </el-table-column>
            </el-table>


            


       </div>
    </el-card>
  </template>

<script>

export default{
    data(){
        return{
            dialogVisible: false,//是否显示弹出层
            
            form : {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
                
            },
            tableData:[
            {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
             }, 
             {
                date: '2016-05-03',
                name: 'cat ',
                address: 'No. 189, Grove St, Los Angeles',
             }, 
             {
                date: '2016-05-03',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
             }, 
             
            ]
        }
    },
    mounted(){

               
    },
    computed:{
        
    },
    methods:{

        handleClose(done) {
            // this.dialogVisible = true;
        },
        //弹窗确定
        dialogVisibleYes() {},
        //居中
            //点击行触发，选中或不选中复选框
        handleRowClick (row, column, event) {
        this.$refs.multipleTable.toggleRowSelection(row);
        },


        
    },
    components:{

    }

    
}
</script>
<style scoped>
  .text {
    font-size: 14px;
  }
  .box-card {
    width: 100%;
    height: 700px;
    margin: 5rem,5rem;
    background-color: whitesmoke;
  }
.left,.el-button,.operation li{
    cursor: pointer;
}

.el-input {
  width: 300rem;
}
.dialog-footer button:first-child {
  margin-right: 10rem;
}
.nav{
    width: 100%;
    height: 2rem;
    margin-bottom: 2rem;
    /* background-color: aqua; */
    
}
.btn_left{
    float: left;
}

.btn_right{
    float: right;
}
.file_box{
    width: 100%;
    height: 100%;
}
.left{
    float: left;  
}
.left:hover,.operation li:hover{
    color: #626aef;
}
.right{
    float: right;
}
.bor .el-button{
    border: none;
}



  </style>
  